<template>
    <div class="repair-form">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
            <div class="form-header">
                <h2>智慧校园物资申请</h2>

            </div>


            <el-row>
                <el-col :span="20">
                    <el-form-item label="物资" prop="floor">
                        <el-select v-model="ruleForm.floor" placeholder="请选择物资" style="width: 100%;">
                            <el-option v-for="i in ruleForm.materails" :label="i.mdescription" :value="i.mid">
                                <!-- {{ i.mdescription }} -->

                                <span style="float: left">{{ i.mdescription }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ i.mtitle }}</span>
                            </el-option>

                        </el-select>
                    </el-form-item>
                </el-col>

            </el-row>


            <div class="form-footer">
                <!-- <el-form-item> -->
                <el-button type="primary" @click="submitForm('ruleForm')" round>立即申请</el-button>
                <el-button type="primary" @click="resetForm('ruleForm')" round>重置</el-button>
                <!-- <el-button type="primary" @click="submitForm('ruleForm')" round>立即报修</el-button>
                <el-button type="primary" @click="resetForm('ruleForm')">重置</el-button> -->
                <!-- </el-form-item> -->
            </div>
        </el-form>


        <div class="table-container">
            <h2 class="table-title">我已申请的物资</h2>
            <el-table :data="myMaterail" style="width: 100%" stripe>

                <el-table-column prop="mtitle" label="物资名"></el-table-column>
                <el-table-column prop="mdescription" label="详情"></el-table-column>
                <el-table-column prop="mcreatetime" label="申请时间"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="danger" size="mini" @click="deleteQuestion(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        @current-change="handlePageChange"
                        :current-page="currentPage"
                        :page-size="pageSize"
                        layout="prev, pager, next"
                        :total="total"
                        :disabled="loading"
                ></el-pagination>
            </div>
        </div>
    </div>




</template>

<!--
<script setup>

const materails = [
    {
        id: 1,
        description: "物资1"
    },
    {
        id: 2,
        description: "物资2"
    }
]
const floor = ''

</script > -->


<script>
// eslint-disable-next-line no-unused-vars
import { request } from "@/axios/request";
export default {


    created() {
        this.getUser()
        this.getMaterial()
        this.getMaterialById();
    },


    data() {
        return {
            currentPage: 1,
            pageSize: 5,
            total: 21,
            myMaterail:[],
            ruleForm: {

                UserId: "",

                floor: "",

                materails: [
                    // {
                    //     mid: 1,
                    //     mtitle: "主题",
                    //     mdescription: "物资1"
                    // },
                    // {
                    //     mid: 2,
                    //     mtitle: "主题",
                    //     mdescription: "物资2"
                    // }

                ]

            }, rules: {

                floor: [{ required: true, message: "请选择申领物品", trigger: "change" }],

            },

        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {

                    // console.log(this.ruleForm.floor)

                    // console.log(this.ruleForm.UserId)


                    request({
                        url: "/Material/apply/" + this.ruleForm.UserId + "/" + this.ruleForm.floor,
                        method: "post",
                    })
                        .then((res) => {
                            this.$message({
                                message: res.data.msg,
                                type: "success",
                            });
                            this.resetForm(formName);
                        })
                        .catch((error) => {
                            this.$message({
                                message: error.response.data.msg,
                                type: "error",
                            });
                        });
                } else {
                    console.log("error submit!!");
                    return false;
                }

            });
            this.getMaterialById()
        },
        getUser() {
            request({
                url: '/user',
                method: 'get',
                headers: {
                    'content-type': 'application/json, text/plain, */*'
                }
            }).then(res => {
                this.ruleForm.UserId = res.data.object.id;


            })
        },
        getMaterial() {
            request({
                url: '/Material/getAll',
                method: 'get',
                headers: {
                    'content-type': 'application/json, text/plain, */*'
                }
            }).then(res => {
                this.ruleForm.materails = res.data.object;

            })
        },


        getMaterialById() {
            request({
                url: '/Material/myMaterials/'+this.currentPage+"/"+this.pageSize,
                method: 'get',

            }).then(res => {
                this.myMaterail = res.data.object.data;
                this.total = Number(res.data.object.total)

            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
// 处理分页
        handlePageChange(page) {
            this.currentPage = page
            this.getMaterialById()
        }
    },


};
</script>

<style scoped>
.repair-form {
    margin: 0 auto;
    max-width: 800px;
    padding: 50px;
    border-radius: 10px;
    box-shadow: 2px 2px 20px #e5e5e5;
}

.form-header {
    text-align: center;
    margin-bottom: 40px;
}

.form-header h2 {
    font-size: 30px;
    color: #333;
    margin-bottom: 20px;
}

.form-header p {
    font-size: 14px;
    color: #999;
    line-height: 1.5;
}

.el-form-item__label {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}

.el-form-item {
    margin-bottom: 30px;
}

.el-select-dropdown {
    border-radius: 10px;
}

.el-input__inner {
    border-radius: 10px;
}

.el-date-editor {
    border-radius: 10px !important;
}

.el-textarea__inner {
    border-radius: 10px;
}

/* .el-button {
    display: inline-block;
    width: 150px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: rgb(101, 141, 243);
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    transition: all .2s ease-in-out;
} */

.el-button:hover {
    background-color: rgb(55, 100, 205);
}

.el-button:first-child {
    margin-right: 20px;
}

.form-footer {
    text-align: center;
}
</style>
